<style scoped lang="scss">
.my-item{
  margin-left: 33rpx;
  margin-right: 33rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  margin-bottom: 20rpx;

  & > view{
    height: 90rpx;
    line-height: 90rpx;
    display: flex;
    padding-left: 33rpx;
    padding-right: 33rpx;

    & > view{
      &:nth-child(1){
        width: 200rpx;
      }
      &:nth-child(2){
        margin-left: 20rpx;
        flex: 1;
        font-size: 28rpx;
        display: flex;
        justify-content: flex-end;
        margin-right: 10rpx;
        color: #878788;
        align-items: center;

        image{
          width: 53rpx;
          height: 53rpx;
          border-radius: 50%;
        }
      }
      &:nth-child(3){
      }
    }
  }
}
.logout{
  margin: 60rpx 44rpx 0 44rpx;
  height: 84rpx;
  line-height: 84rpx;
  background: #c3c3c3;
  border-radius: 42rpx 42rpx 42rpx 42rpx;
  color: #fff;
  text-align: center;
  font-size: 28rpx;
}

.nickname-el{
  margin-left: 33rpx;
  margin-right: 33rpx;
  height: 88rpx;
  line-height: 88rpx;
  background: #F6F6F6;
  border-radius: 15rpx;
  padding-left: 30rpx;
  margin-top: 50rpx;
  margin-bottom: 50rpx;
}
</style>

<template>
  <view class="page">
    <view class="s-head">
      <h-head :back="true">
        个人信息
      </h-head>
    </view>

    <view class="s-body">
      <scroll-view class="maxh" :scroll-y="true">

        <view class="my-item mt-20">
          <view @click="changeAvatar">
            <view>头像</view>
            <view>
              <image mode="aspectFill" v-if="userInfo.avatar" :src="userInfo.avatar" alt="" />
              <image mode="aspectFill" v-else src="../../static/images/ai-icon.png" alt="" />
            </view>
            <view><text class="iconfont icon-jinru"></text></view>
          </view>
          <view @click="nicknameParam.visible = true">
            <view>昵称</view>
            <view>{{ userInfo.nickname }}</view>
            <view><text class="iconfont icon-jinru"></text></view>
          </view>

          <view>
            <view>帐号</view>
            <view>{{ userInfo.username }}</view>
            <view></view>
          </view>
        </view>

        <view class="logout">
          退出登录
        </view>

        <u-modal v-model="nicknameParam.visible" title="修改昵称" :show-cancel-button="true" @confirm="sureChangeNickName" @cancel="nicknameParam.visible = false">
          <input class="nickname-el" type="text" placeholder="请输入昵称" v-model="nicknameParam.data.val">
        </u-modal>

      </scroll-view>
    </view>
  </view>
</template>

<script>

export default {
  components: {
  },
  onShow() {
  },
  computed: {
    vipText() {
      let str = '未开通'
      if(this.userInfo) {
        if(this.userInfo.vipExpireTime) {
          if(+new Date(this.userInfo.vipExpireTime) > +new Date()) {
            return this.utils.formatDate(+new Date(this.userInfo.vipExpireTime), 'yyyy-MM-dd') + '过期'
          }else{
            return '已过期'
          }
        }
      }
      return str
    },
  },
  onLoad(option) {
    this.init()
  },
  data() {
    return {
      userInfo: {},
      nicknameParam: {
        visible: false,
        data: {
          val: ''
        }
      }

    };
  },
  methods: {
    init() {
      this.httpClient.post({
        url: this.APIPath.user.info,
        data: {}
      }).then(res => {
        this.userInfo = res.data
      })
    },
    changeUserInfo(d) {
      this.httpClient.post({
        url: this.APIPath.user.changeInfo,
        data: d
      }).then(res => {
        this.init()
      }, err => {
      })
    },
    sureChangeNickName() {
      const v = this.nicknameParam.data.val

      if(!v) {
        return this.utils.toast('请输入昵称')
      }

      this.changeUserInfo({
        nickname: v
      })
    },
    changeAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['camera', 'album'],
        success: (res) => {
          let filePath = res.tempFilePaths[0];

          this.httpClient.uploadFile(this.APIPath.user.uploadFile, filePath, {
              type: 'user',
          }).then(res => {
            this.changeUserInfo({
              avatar: res.data.url
            })
          }, err => {
            this.utils.toast('上传失败')
          })
        },
        fail: (uploadFileRes) => {
          this.utils.toast('选择图片失败')
        }
      })

    },
  },
};
</script>

